<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数字文本框 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_icon.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_number.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		.c-input-number, .o-input {width: auto;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>数字文本框</dd>
			<dt>描述：</dt>
			<dd>只能输入（粘贴）数字，可通过按钮来递增低减；解决了浮点数四则运算的精度bug</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>basic_icon.css</code>
				<code>form_input.css</code>
				<code>form_input_number.css</code>
				<code>jquery.js</code>
				<code>jquery.calcFloat.js</code>
    			<code>jquery.inputNumber.js</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
        <h4>未指定任何值：</h4>
        <label class="c-input-number">
            <input class="o-input" type="text" id="demoInputNum1">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
		<h4>带单位（使用 HTML data-unit 指定）：</h4>
		<pre>data-unit="℃"</pre>
        <label class="c-input-number" data-unit="℃">
            <input class="o-input" type="text" id="demoInputNum10">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
		<h4>带单位（使用 JS 指定值）：</h4>
<pre>$('#demoInputNum3').inputNumber({
    unit: '&#8451;'  // 使用实体字符或对应编码均可
});</pre>
        <label class="c-input-number">
            <input class="o-input" type="text" id="demoInputNum11">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
        <h4>使用 HTML data-* 指定值：</h4>
        <pre>data-min="0" data-max="2.0" data-step="0.2"</pre>
        <label class="c-input-number">
            <input class="o-input" type="text" value="0.6" data-min="0" data-max="2.0" data-step="0.2" id="demoInputNum2">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
		<h4>使用 JS 设置：</h4>
<pre>$('#demoInputNum3').inputNumber({
    step: 0.1,
    max: 1.0,
    min: -1.0
});</pre>
        <label class="c-input-number">
            <input class="o-input" type="text" id="demoInputNum3">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
		<h4>只能是正整数（禁用小数、负数）：</h4>
<pre>$('#demoInputNum9').inputNumber({
    decimal: false,
    min: 0
});</pre>
        <label class="c-input-number">
            <input class="o-input" type="text" id="demoInputNum9">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
        <h4>不使用控制按钮：（初始化为一个普通数字文本框）</h4>
		<input class="o-input" type="text" id="demoInputNum4" value="13456789123">
		<label class="c-input-number" data-unit="kWh">
			<input class="o-input" type="text" id="demoInputNum12" value="2000" style="width:120px">
		</label>
		<hr>
        <h4>自定义设置按钮顺序：</h4>
        <label class="c-input-number">
            <input class="o-input" type="text" id="demoInputNum8">
            <span class="icon-plus"></span>
            <span class="icon-minus"></span>
		</label>
		<hr>
        <h4>只读模式：</h4>
        <label class="c-input-number">
            <input class="o-input" type="text" id="demoInputNum5" readonly>
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
        <h4>禁用模式：</h4>
        <label class="c-input-number">
            <input class="o-input" id="demoInputNum6" type="text" value="3" disabled>
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
		<hr>
		<h4>不合法参数测试：<small>（请查看控制台）</small></h4>
		<pre>data-min="最小值" data-max="abc" data-step="大步子"</pre>
        <label class="c-input-number">
            <input class="o-input" id="demoInputNum7" type="text" value="3" data-min="最小值" data-max="abc" data-step="大步子">
            <span class="icon-minus"></span>
            <span class="icon-plus"></span>
		</label>
    </div>
    <script src="../../dist/js/libs/jquery-1.11.3.min.js"></script>
    <script src="../../assets/dest/js/jquery.calcFloat.js"></script>
    <script src="../../assets/dest/js/jquery.inputNumber.js"></script>
    <script>
        $('#demoInputNum1').inputNumber();
        $('#demoInputNum2').inputNumber();
        $('#demoInputNum3').inputNumber({
            step: 0.1,
            max: 1.0,
            min: -1.0
        });
        $('#demoInputNum4').inputNumber();
        $('#demoInputNum5').inputNumber();
        $('#demoInputNum6').inputNumber();
        $('#demoInputNum7').inputNumber();
		$('#demoInputNum8').inputNumber();
		$('#demoInputNum9').inputNumber({
			decimal: false,
			min: 0
		});
		$('#demoInputNum10').inputNumber();
		$('#demoInputNum11').inputNumber({
			unit: '℃'
		});
		$('#demoInputNum12').inputNumber({
			max: 2000
		});
	</script>
</body>
</html>
